<template>
    <div class="sidedrawer">
        <div class="sidedrawerNavigation">
            <a class="sidedrawerNavigation__close" v-on:click="hideSidedrawer"><img src="/img/menu-hamburger.png"></a>

        </div>
        <ul>
            <li class="nav-home" v-bind:class="{'active-nav': activeMenu == 'home'}">
                <router-link :to="{ name: 'Home' }">
                    <i v-html="homeIcon"></i>
                    <p> Home</p>
                </router-link>
            </li>
            <li class="nav-activities">
                <a href="#">
                    <i v-html="activitiesIcon"></i>
                    <p> Activities</p></a>
            </li>
            <li class="nav-discussions">
                <a href="#">
                    <i v-html="discussionsIcon"></i>
                    <p> Discussions</p></a>
            </li>
            <li class="nav-obstacles">
                <a href="#">
                    <i v-html="obstaclesIcon"></i>
                    <p> Obstacles</p></a>
            </li>
            <li class="nav-gallery">
                <a href="#">
                    <i v-html="galleryIcon"></i>
                    <p> Gallery</p></a>
            </li>
        </ul>
        <ul class="accordian-nav">

            <li class="nav-asset" v-bind:class="{'active-nav': activeMenu == 'assets'}">
                <router-link :to="{ name: 'Assets' }">
                    <i v-html="assetIcon"></i>
                    <p>Assets</p>
                </router-link>
                <ul>

                    <li class="nav-asset-assetsList" v-bind:class="{'active-nav': routeName == 'Assets'}">
                        <router-link :to="{ name: 'Assets' }">
                            <p>Assets</p>
                        </router-link>

                    </li>
                    <li class="nav-asset-systems" v-bind:class="{'active-nav': routeName == 'AssetSystems'}">
                        <a href="#">
                            <p>Systems</p>
                        </a>
                    </li>
                    <li class="nav-asset-components">
                        <a href="#">
                            <p>Components</p>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="nav-audit" v-bind:class="{'active-nav': activeMenu == 'audits'}">
                <router-link :to="{ name: 'AuditsDashboard' }">
                    <i v-html="auditIcon"></i>
                    <p>Audits</p>
                </router-link>

                <ul>

                    <li class="nav-audit-auditList">
                        <a href="#">
                            <p>Audits</p>
                        </a>
                    </li>
                    <li class="nav-audit-diagnosis">
                        <a href="#">
                            <p>Diagnosis</p>
                        </a>
                    </li>
                    <li class="nav-audit-solutions">
                        <a href="#">
                            <p>Solutions</p>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="nav-processes" v-bind:class="{'active-nav': activeMenu == 'processes'}">
                <router-link :to="{ name: 'ProcessesDashboard' }">
                    <i v-html="processesIcon"></i>
                    <p>Processes</p>
                </router-link>
                <ul>
                    <li class="nav-processes-processesList">
                        <a href="#">
                            <p>Processes</p>
                        </a>
                    </li>
                    <li class="nav-processes-task-codes">
                        <a href="#">
                            <p>Task Codes</p>
                        </a>
                    </li>
                    <li class="nav-processes-templates">
                        <a href="#">
                            <p>Templates</p>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="nav-work" v-bind:class="{'active-nav': activeMenu == 'work'}">
                <router-link :to="{ name: 'WorkDashboard' }">
                    <i v-html="workIcon"></i>
                    <p>Work</p>
                </router-link>
                <ul>
                    <li class="nav-work-projects">
                        <router-link :to="{ name: 'ProjectDashboard' }">
                            <p>Projects</p>
                        </router-link>
                    </li>
                    <li class="nav-work-tasks">
                        <a href="#">
                            <p>Tasks</p>
                        </a>
                    </li>
                    <li class="nav-work-obstacles">
                        <a href="#">
                            <p>Obstacles</p>
                        </a>
                    </li>
                    <li class="nav-work-timesheets" v-bind:class="{'active-nav': routeName == 'WorkTimeSheets'}">
                        <router-link :to="{ name: 'WorkTimeSheets' }">
                            <p>Timesheets</p>
                        </router-link>
                    </li>
                </ul>
            </li>

        </ul>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {

        data() {
            return {
                routeName : this.$route.name,
                activeMenu: 'home',
                homeIcon: require('../../assets/img/Home-Icon.svg'),
                activitiesIcon: require('../../assets/img/Activities-Icon.svg'),
                discussionsIcon: require('../../assets/img/Discussions-Icon.svg'),
                obstaclesIcon: require('../../assets/img/Obstacles-Icon.svg'),
                galleryIcon: require('../../assets/img/Gallery-Icon.svg'),
                assetIcon: require('../../assets/img/Assets-Icon.svg'),
                auditIcon: require('../../assets/img/Audits-Icon.svg'),
                processesIcon: require('../../assets/img/Processes-Icon.svg'),
                workIcon: require('../../assets/img/Work-Icon.svg')

            }
        },

        mounted: function() {
            this.setActiveMenu();
        },

        methods: {
            setActiveMenu: function() {
                this.routeName = this.$route.name;
                $('body').removeClass(this.activeMenu);
                // @TODO refactor so this can be used to render the nav menus too?
                var menus = [
                    {
                        name: 'assets',
                        items: [
                            'AssetsDashboard',
                            'Assets',
                            'Asset',
                            'AssetSystems'
                        ]
                    },
                    {
                        name: 'home',
                        items: [
                            'Home'
                        ]
                    },
                    {
                        name: 'work',
                        items: [
                            'WorkDashboard',
                            'WorkTimeSheets',
                            'Projects'
                        ]
                    },
                    {
                        name: 'audits',
                        items: [
                            'AuditsDashboard'
                        ]
                    },
                    {
                        name: 'processes',
                        items: [
                            'ProcessesDashboard'
                        ]
                    },
                ];
                // Set Active Menu
                for(var i = 0; i < menus.length; i++) {
                    for(var j = 0; j < menus[i].items.length; j++) {
                        if(menus[i].items[j].indexOf(this.$route.name) != -1) {
                            this.activeMenu = menus[i].name;
                        }
                    }
                }

                $('body').addClass(this.activeMenu);

            },
            showSidedrawer: function(){
                var  sidedrawerEl = $('#sidedrawer')

                var options = {
                    onclose: function() {
                        sidedrawerEl
                            .removeClass('active')
                            .appendTo(document.body);
                    }
                };

                var $overlayEl = $(mui.overlay('on', options));

                // show element
                sidedrawerEl.appendTo($overlayEl);
                setTimeout(function() {
                    sidedrawerEl.addClass('active');
                }, 20);
            },
            hideSidedrawer: function(){
                $('body').toggleClass('hide-sidedrawer');
            }
        },

        watch: {
            '$route': 'setActiveMenu'
        }
    }
</script>